<template>
    <div>
        <ltnavbar :title="'编辑需求'"></ltnavbar>
        <mu-container style="width: 100%; padding:3rem 1rem;">
            <mu-form ref="form" :model="form" class="mu-demo-form">
                <mu-form-item label="简述"   >
                    <mu-text-field v-model="form.name"></mu-text-field>
                </mu-form-item>

                <mu-form-item prop="textarea" label="预算" >
                    <mu-text-field v-model="form.fee"  type="number"></mu-text-field>
                </mu-form-item>

                <mu-form-item prop="textarea" label="描述" >
                    <mu-text-field v-model="form.content" multi-line :rows="3" :rows-max="6" ></mu-text-field>
                </mu-form-item>
                <mu-form-item prop="textarea" label="图片" >
                    <upload @callback="callback"></upload>
                    <div class="mu-card-media" v-for="item in img_list">
                        <img  :src="item" alt="" style="width: 100px;height: 80px;">
                        <div @click="del_img(item)" style="text-align: center;"> 删除 </div>
                    </div>
                </mu-form-item>
                <mu-form-item>
                    <mu-button color="primary" @click="submit">提交</mu-button>
                    <mu-button @click="clear">重置</mu-button>
                </mu-form-item>
            </mu-form>
        </mu-container>

    </div>
</template>
<script>

    import ltnavbar from "@/view/common/navbar";
    import upload from "@/view/common/upload";

    export default {
        data () {
            return {
                form: {
                    content: '',
                },
                img_list:[]
            }
        },
        methods: {
            del_img(item){
                let _list = [];
                for(let i of this.img_list){
                    if(i != item){
                        _list.push(i);
                    }
                }
                this.img_list = _list;
            },
            callback(url){
                if(!this.img_list){
                    this.img_list = [];
                }
                this.img_list.push(url);
            },
            submit () {
                let $this = this;
                this.form.image = this.img_list.join(",");
                this.$api.employ_purchase_edit(this.form,function(resp){
                    if(resp.code == 0){
                        $this.$toast.success(resp.msg)
                        $this.$router.push("/purchase/index");
                    }else{
                        $this.$toast.error(resp.msg)
                    }
                });
            },
            clear () {
                this.$refs.form.clear();
                this.form = {
                    title: '',
                    content: '',
                };
            }
        },
        components:{
            ltnavbar,upload
        }
    };
</script>
<style>
    .mu-demo-form {
        width: 100%;
        max-width: 460px;
    }
</style>